<template>
  <div class="paper-index">
    <div class="paper-menus">
      <Button type="primary" @click="addPaper"><Icon type="md-add-circle" /><span class="add-paper-span">添加试卷</span></Button>
    </div>
    <!--表格头部信息条-->
    <div class="ivu-mt ivu-alert ivu-alert-info ivu-alert-with-icon">
      <span class="ivu-alert-icon"><i class="ivu-icon ivu-icon-ios-information-circle"></i></span>
      <span class="ivu-alert-message">
        <div style="font-size: 14px;">已选择 <strong style="color: rgb(45, 140, 240);">{{ paperList.length }}</strong> 条</div>
      </span>
      <span class="ivu-alert-desc"></span>
    </div>
    <div class="table-paper">
      <Table :columns="columns" :data="paperList"></Table>
    </div>
    <!--添加试卷模态框-->
    <div class="add-paper-modal">
      <Drawer title="添加试卷" :closable="false" v-model="showDrawer" width="40%" scrollable>
        <Form :model="paperEntity" ref="paperForm" :rules="paperRules">
          <FormItem label="试卷标题" prop="paperName">
            <Input v-model="paperEntity.paperName" placeholder="请输入试卷标题"></Input>
          </FormItem>
          <FormItem label="试卷类目" prop="categoryId">
            <Select v-model="paperEntity.categoryId">
              <Option v-for="category in categoryList" :value="category.id">{{ category.categoryName }}</Option>
            </Select>
          </FormItem>
          <FormItem label="题目数量">
            <InputNumber :max="100" :min="1" value="0" v-model="paperEntity.number"></InputNumber>
          </FormItem>
          <FormItem label="难以程度" prop="level">
            <RadioGroup v-model="paperEntity.level" type="button" button-style="solid">
              <Radio label="1">一级</Radio>
              <Radio label="2">二级</Radio>
              <Radio label="3">三级</Radio>
              <Radio label="4">四级</Radio>
              <Radio label="5">五级</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="savePaper('paperForm')">确定</Button>
          </FormItem>
        </Form>
      </Drawer>
    </div>
    <!--添加题目抽屉-->
    <div class="add-paper-modal">
      <Drawer title="添加试卷" :closable="false" v-model="showSubjectDrawer" width="60%" scrollable class="paper-subject-drawer">
        <Form :model="subjectEntity" ref="subjectForm" :rules="subjectRules" class="add-subject-form">
          <FormItem label="题目正文" prop="subjectContent">
            <codemirror v-model="subjectEntity.subjectContent" :options="cmOption" class="code-mirror" @changes="onCmCodeChange"></codemirror>
          </FormItem>
          <FormItem label="题目类目" prop="categoryId">
            <Select v-model="subjectEntity.categoryId">
              <Option v-for="category in categoryList" :value="category.id">{{ category.categoryName }}</Option>
            </Select>
          </FormItem>
        </Form>
        <div class="page-drawer-footer"><Button type="primary" @click="saveSubject('subjectForm')">确定</Button></div>
      </Drawer>
    </div>
  </div>
</template>

<script>
import { globalUrl } from '@/api/doMain'
import 'codemirror/lib/codemirror.css'
import 'codemirror/lib/codemirror.js'
import 'codemirror/mode/clike/clike'
import "codemirror/theme/idea.css";
import 'codemirror/addon/edit/closebrackets.js';
import 'codemirror/addon/edit/matchbrackets.js';


export default {
  inject: ['reload'], // 引入局部刷新到组件
  name: 'Paper',
  created () {
    this.queryList()
  },
  data () {
    return {
      cmOption: {
        tabSize: 4,
        indentUnit: 4,
        mode: "text/x-java",  //Java语言
        autofocus: true,
        lineNumbers: true,   //显示行号
        smartIndent: true, // 自动缩进
        lineWrapping: true,//代码折叠
        foldGutter: true,
        matchBrackets: true,
        autoCloseBrackets: true, // 自动补全括号
        hintOptions: {
          completeSingle: true // 当匹配只有一项的时候是否自动补全
        }
      }
      ,
      columns: [
        { title: 'Id', key: 'paperId', type: 'selection', width: 55 },
        { title: '试卷名称', key: 'paperName' },
        { title: '难度', key: 'level' },
        { title: '题目数量', key: 'number' },
        { title: '类目', key: 'categoryName' },
        {
          title: '创建时间',
          key: 'createTime',
          render: (h, params) => {
            return h('div',
              this.dateFormat(params.row.createTime)
            )
          }
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('a', {
                on: {
                  click: () => {
                    this.toAddSubject(params)
                  }
                }
              }, '添加试题')
            ])
          }
        }
      ],
      paperList: [],
      showDrawer: false,
      showSubjectDrawer: false,
      paperEntity: {
        categoryId: ''
      },
      subjectEntity: { },
      categoryList: [],
      // 添加是否检测
      paperRules: {
        paperName: [{ required: true, message: '试卷标题必填项', trigger: 'blur' }],
        categoryId: [{ type: 'number', required: true, message: '试卷类目必填项', trigger: 'change' }],
        level: [{ required: true, message: '难易程度必填项', trigger: 'change' }]
      },
      subjectRules: {
        subjectContent: [{ required: true, message: '选项内容不能为空', trigger: 'blur' }],
        categoryId: [{ type: 'number', required: true, message: '试卷类目必填项', trigger: 'change' }]
      },
      choicePaperId: 0 // 要添加试题的试卷id
    }
  },
  methods: {
    queryList () {
      const that = this
      this.http.post(globalUrl + '/paper/queryList', { token: window.sessionStorage.getItem('token') }).then(function (response) {
        that.paperList = response.data.data
      })
    },
    addPaper () {
      const that = this
      that.showDrawer = true
      that.http.post(globalUrl + '/category/queryList', { token: window.sessionStorage.getItem('token') }).then(function (response) {
        that.categoryList = response.data.data
      })
    },
    // 保存试卷
    savePaper (paperForm) {
      const that = this
      this.$refs[paperForm].validate((valid) => {
        if (valid) {
          that.http.post(globalUrl + '/paper/addSingle', that.paperEntity).then(function (response) {
            if (response.data.code === '000000') {
              that.msg.success('试卷录入成功')
              that.reload()
            }
          })
        } else {
          that.msg.error('请完整录入必填项')
        }
      })
    },
    // 打开添加试题抽屉
    toAddSubject (params) {
      const that = this
      that.choicePaperId = params.row.paperId
      that.showSubjectDrawer = true
      that.http.post(globalUrl + '/category/queryList', { token: window.sessionStorage.getItem('token') }).then(function (response) {
        that.categoryList = response.data.data
      })
    },
    // 添加试题
    saveSubject (subjectForm) {
      const that = this
      that.subjectEntity.paperId = that.choicePaperId
      this.$refs[subjectForm].validate((valid) => {
        if (valid) {
          console.log('success')
          that.http.post(globalUrl + '/subject/addSingle', that.subjectEntity).then(function (response) {
            console.log(response)
            if (response.data.code === '000000') {
              that.msg.success('添加试题成功')
              that.reload()
            }
          })
        } else {
          console.log('error')
        }
      })
    },
    // Code文本编辑器
    onCmReady3() {
      this.$refs.myCmGenerate.codemirror.setSize('400px', '400px')
    },
    onCmFocus(instance, event) {
      console.log(instance)
      console.log(event)
    },
    onCmCodeChange(instance, obj) {
      console.log(instance)
      console.log(obj)
    }
  }
}
</script>

<style>
@import "../assets/base.css";
.code-mirror .CodeMirror-scroll {
  overflow: scroll !important;
  margin-bottom: 0;
  margin-right: 0;
  padding-bottom: 0;
  height: 100%;
  outline: none;
  position: relative;
  border: 1px solid #dddddd;
}
.code-mirror{
  font-size : 13px;
  line-height : 150%;
  text-align: left;
}
.CodeMirror{
  font-family: Consolas;
}
</style>
